<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Player</title>
<style>
  body {
    background-color: #0a0f1f;
    color: white;
    font-family: Arial, sans-serif;
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .player {
    width: 300px;
    background-color: #1a1f31;
    padding: 20px;
    border-radius: 10px;
  }
  .song-info {
    display: flex;
    align-items: center;
  }
  .song-info img {
    width: 60px;
    height: 60px;
    margin-right: 10px;
  }
  .song-title {
    font-size: 18px;
    margin: 0;
  }
  .artist {
    color: #b0b0b0;
    font-size: 14px;
  }
  .controls {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  .controls button {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
  }
  .progress-bar {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }
  .progress-bar #progress {
    width: 100%;
    height: 5px;
    background-color: #2a2f3f;
    border-radius: 5px;
    overflow: hidden;
  }
  .progress-bar #played {
    width: 20%;
    height: 100%;
    background-color: #4a8af3;
  }
  .back-button {
    position: absolute;
    top: 20px;
    left: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
  }
</style>
</head>
<body>
    <a href="./index.html"><button class="back-button" onclick="window.history.back();">&#9664;</button></a>
<div class="player">
  <div class="song-info">
    <img src="./img/308.webp" alt="Album Cover">
    <div>
      <p class="song-title">小孩</p>
      <p class="artist">苏星婕</p>
    </div>
  </div>
  <div class="controls">
     <!-- 向左按钮 -->
    <button>&#9664;</button>
    <!-- 暂停按钮 换一个-->

    <button>&#10074;&#10074;</button>
    <!-- <button>&#9656;</button> -->
    <button>&#9654;</button>
    <!-- 随机按钮 -->
    <button>&#8635;</button>
    
  </div>
  <div class="progress-bar">
    <span>00:21</span>
    <div id="progress">
      <div id="played"></div>
    </div>
    <span>03:39</span>
  </div>
</div>
</body>
</html>